<template>
  <!-- 写一个自定义弹窗组件 -->
  <!-- 包含一个标题、内容、确定按钮、取消按钮 -->
  <div class="custom-dialog-wrapper">
    <div class="custom-dialog">
      <div class="dialog-header">
        <slot name="header" v-if="!itemBook">添加商品</slot>
        <slot name="header" v-if="itemBook">修改商品</slot>
      </div>
      <div class="dialog-body">
        <p>商品名:</p>
        <input type="text" v-model="book.brandName" placeholder="请输入商品：">
        <p>介绍:</p>
        <input type="text" v-model="book.introduction" placeholder="请输入介绍：">
        <p>数量:</p>
        <el-input-number v-model="book.count" :min="1" />
        <p>类别:</p>
        <select v-model="book.status">
          <option value="0">蔬菜</option>
          <option value="1">零食</option>
          <option value="2">玩具</option>
          <option value="3">生活用品</option>
          <option value="4">其它</option>
        </select>
      </div>
      <div class="dialog-footer">
        <el-button type="info" size="large" @click="onCancel">取消</el-button>
        <el-button type="primary" size="large" @click="onConfirm">确认</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, defineEmits, defineProps } from 'vue';
import { type Book } from '../models/book';
import { addBookData, updateBookData,getBooksData } from '../models/getBooksData';

const props = defineProps<{
data: Book[];
itemBook?: Book; // 可选，因为添加商品时没有 itemBook
}>();

const emit = defineEmits(['cancel', 'confirm']);

const book = ref<Book>({
id: '',
photo: `../../../src/assets/images/book${Math.floor(Math.random() * 15) + 1}.jpg`,
brandName: '',
introduction: '',
count: 1,
status: 0, // 默认选择蔬菜
});

// 当 itemBook 更新时更新 book 对象
watch(() => props.itemBook, (newVal) => {
if (newVal) {
  book.value = { ...newVal }; // 克隆 itemBook 的对象
} else {
  // 重置 book 对象用于添加新商品
  book.value = {
    id: '',
    photo:'',
    brandName: '',
    introduction: '',
    count: 1,
    status: 0,
  };
}
});

// 取消按钮点击事件
const onCancel = () => {
emit('cancel', false);
};

// 确认按钮点击事件
const onConfirm = async () => {
try {
  if (props.itemBook) {
    // 如果是修改商品
    const success = await updateBookData(book.value);
    if (success) {
      const allBooks = getBooksData();
      console.log('商品更新成功');
      emit('confirm', allBooks);
    } else {
      console.log('商品更新失败');
    }
  } else {
    // 如果是添加商品
    const success = await addBookData(book.value);
    if (success) {
      const allBooks = getBooksData();
      console.log('商品添加成功');
      emit('confirm', allBooks);
    } else {
      console.log('商品添加失败');
    }
  }
} catch (error) {
  console.error('操作商品时发生错误:', error);
} finally {
  emit('cancel', false);
}
};
</script>

<style scoped lang="scss">
.custom-dialog-wrapper {
  /* 黑色蒙版 */
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.custom-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-image: url('../assets/images/picture2.jpg');
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 550px;
}

.dialog-header {
  font-size: 20px;
  margin-bottom: 10px;
  text-align: center;
  color: #f2d6c9;
  font-weight: bold;
}

.dialog-body {
  margin-bottom: 20px;
}

.dialog-body p {
  margin: 10px 0;
  font-size: 18px;
  color: #f2d6c9;
  font-weight: 600;
}

.dialog-footer {
  text-align: center;
  padding: 20px;
}

.el-button {
  width: 25%;
}

select {
  width: 150px;
  height: 30px;
  font-size: 15px;
  outline: none;
}

input {
  width: 100%;
  height: 30px;
  outline: none;
}
</style>
